<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ginkgoch - Shapefile</title>

    <link rel="stylesheet" href="assets/bootstrap.min.css" >
    <link rel="stylesheet" href="assets/leaflet.css" >
    <link rel="stylesheet" href="assets/content.css" >
</head>
<body>
    <script>
        let state = `<%- JSON.stringify(overview) %>`;
        state = JSON.parse(state);
    </script>
    <div class="container root" style="display: none;">
        <h1 class="title">
            <span>Shapefile - {{ name }}</span>
            <button type="button" 
                class="btn btn-lg btn-success" 
                data-toggle="popover" 
                title="Choose another shapefile"
                data-placement="bottom"
                data-trigger="focus"
                data-html="true">
                <svg class="svg-icon" viewBox="0 0 20 20">
                    <path d="M17.927,5.828h-4.41l-1.929-1.961c-0.078-0.079-0.186-0.125-0.297-0.125H4.159c-0.229,0-0.417,0.188-0.417,0.417v1.669H2.073c-0.229,0-0.417,0.188-0.417,0.417v9.596c0,0.229,0.188,0.417,0.417,0.417h15.854c0.229,0,0.417-0.188,0.417-0.417V6.245C18.344,6.016,18.156,5.828,17.927,5.828 M4.577,4.577h6.539l1.231,1.251h-7.77V4.577z M17.51,15.424H2.491V6.663H17.51V15.424z"></path>
                </svg>
            </button>
        </h1>
        
        <div class="row">
            <div class="col-md-6 col-sm-12">
                <div id="mapContainer" class="map-container bg-light"></div>
            </div>
            <div class="col-md-6 col-sm-12">
                <div class="map-info bg-light">
                    <table class="table table-striped" style="table-layout: fixed;">
                        <tbody>
                            <tr v-for="(value, key) in general" class="general-info">
                                <th scope="row">{{ key }}</td>
                                <td class="field-value" :title="value">{{ value }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="map-table table-scroll">
                <div>
                    Fetched the top <span class="text-primary">{{ properties.length - 1 }}</span> records of <span class="text-primary">{{ general.totalCount }}</span class="text-primary">
                </div>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th v-for="item in properties[0]" scope="col">{{ item }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="row in properties.slice(1)">
                            <td v-for="col in row">{{ col }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script src="./assets/jquery.slim.min.js"></script>
    <script src="./assets/popper.min.js"></script>
    <script src="./assets/bootstrap.min.js"></script>
    <script src="./assets/bundle.js"></script>
</body>
</html>